<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { postTableData } from "@/api/table";
import { searchDataRyfh } from "@/api/search";
import { addOrUpdateRyfh } from "@/api/addOrUpdate";

const city = window.globalObj.name;

const editorRef10 = shallowRef();
const valueHtml10 = ref(`共有客车 XX台次、货车 XX台次。具体情况如下:`);
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};
const editorRef11 = shallowRef();
const valueHtml11 = ref(
  `全市共有医院 128 所，医生10080人，护士11672人。其中市属医院 49 所、共有医生 5629 人，护士 8036 人，医技人员1620人，医疗救护设备和器械齐全。共有城区基层医疗卫生机构 110 所，医务人员2070人，护理人员1074人。共有疾控中心 10 所，医护人数268 人。共有床位数18844个，救护车辆116 台。具体情况如下:`
);
const toolbarConfig11 = {};
const editorConfig11 = { placeholder: "请输入内容..." };
const mode11 = ref("default");
const handleCreated11 = (editor) => {
  editorRef11.value = editor; // 记录 editor 实例，重要！
};
const editorRef12 = shallowRef();
const valueHtml12 = ref(`各类专业队均配备基本保障装备，战时能够满足基本需
供水抢修装备:抢修车辆 54台，各类挖掘机共计24台挖掘装载机2台，推土机3台、叉车1台，牵引车1台，平头半挂牵引汽车1台，重型半挂牵引车1台，发电机15 台，逆变焊机 11台，发电电焊机6台，电热熔焊机1台，交直流两用电焊机2台，开孔机6台，管道冲洗装置3套，锤击式破碎机4`);
const toolbarConfig12 = {};
const editorConfig12 = { placeholder: "请输入内容..." };
const mode12 = ref("default");
const handleCreated12 = (editor) => {
  editorRef12.value = editor; // 记录 editor 实例，重要！
};
const editorRef13 = shallowRef();
const valueHtml13 =
  ref(`⑴生活物资战储情况：米、面生活必需品约XX万kg，可保障辖区内XX万人、XX天的基本生活。
⑵生活物资市场供应情况：米、面生活必需品约XX万kg，可保障辖区内XX万人、XX天的基本生活。
⑶救灾物资战储情况：共储备帐篷XX顶、折叠床XX张、成套的棉被等物品XX套，可保障XX人临时宿营`);
const toolbarConfig13 = {};
const editorConfig13 = { placeholder: "请输入内容..." };
const mode13 = ref("default");
const handleCreated13 = (editor) => {
  editorRef13.value = editor; // 记录 editor 实例，重要！
};

const editorRef14 = shallowRef();
const valueHtml14 = ref(`战时经费保障由XX统一保障。`);
const toolbarConfig14 = {};
const editorConfig14 = { placeholder: "请输入内容..." };
const mode14 = ref("default");
const handleCreated14 = (editor) => {
  editorRef14.value = editor; // 记录 editor 实例，重要！
};

const editorRef15 = shallowRef();
const valueHtml15 = ref(`核生化保障现状`);
const toolbarConfig15 = {};
const editorConfig15 = { placeholder: "请输入内容..." };
const mode15 = ref("default");
const handleCreated15 = (editor) => {
  editorRef15.value = editor; // 记录 editor 实例，重要！
};

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};
const tableData = ref([]);

// 交通运力情况统计表
const jtydList = ref([]);
const getJtydData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "jiaotongyunliqingkuangtongji",
  }).then((res) => {
    if (res.code === 200) {
      jtydList.value = res?.data || [];
    }
  });
};
// 医护人员情况统计表
const yhryList = ref([]);
const getYhryData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "yihurenyuanqingkuangtongji",
  }).then((res) => {
    if (res.code === 200) {
      yhryList.value = res?.data || [];
    }
  });
};
// 专业队装备器材情况统计表
const zydList = ref([]);
const getZydData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "zhuanyezhuangbeiqicaiqingkuang",
  }).then((res) => {
    if (res.code === 200) {
      zydList.value = res?.data || [];
    }
  });
};
// 生活物资战储情况统计表
const shwzList = ref([]);
const getShwzData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "shenghuowuzizhanchuqingkuang",
  }).then((res) => {
    if (res.code === 200) {
      shwzList.value = res?.data || [];
    }
  });
};
// 生活物资市场供应情况统计表
const scgyList = ref([]);
const getScgyData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "shenghuowuzishichanggongyingqingkuang",
  }).then((res) => {
    if (res.code === 200) {
      scgyList.value = res?.data || [];
    }
  });
};
// 救灾物资情况统计表
const jzwzList = ref([]);
const getJzwzData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "jiuzaiwuziqingkuang",
  }).then((res) => {
    if (res.code === 200) {
      jzwzList.value = res?.data || [];
    }
  });
};
// 核化洗消、检测专业队建设现状
const hhList = ref([]);
const getHhData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "hehuajiancexixiao",
  }).then((res) => {
    if (res.code === 200) {
      hhList.value = res?.data || [];
    }
  });
};
// 加载html
const initHtml = () => {
  searchDataRyfh({ m: "任务需求综合保障能力现状" }).then((res) => {
    const { data } = res;
    valueHtml10.value = data.find((x) => x.k === "交通运力现状")?.v || "";
    valueHtml11.value = data.find((x) => x.k === "医疗救护现状")?.v || "";
    valueHtml12.value = data.find((x) => x.k === "装备器材保障现状")?.v || "";
    valueHtml13.value = data.find((x) => x.k === "物资保障现状")?.v || "";
    valueHtml14.value = data.find((x) => x.k === "经费保障现状")?.v || "";
    valueHtml15.value = data.find((x) => x.k === "核生化保障现状")?.v || "";
  });
};
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateRyfh({
      m: "任务需求综合保障能力现状",
      data: [
        {
          k: "交通运力现状",
          v: valueHtml10.value,
        },
        {
          k: "医疗救护现状",
          v: valueHtml11.value,
        },
        {
          k: "装备器材保障现状",
          v: valueHtml12.value,
        },
        {
          k: "物资保障现状",
          v: valueHtml13.value,
        },
        {
          k: "经费保障现状",
          v: valueHtml14.value,
        },
        {
          k: "核生化保障现状",
          v: valueHtml15.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(async () => {
  initHtml();
  await getJtydData();
  await getYhryData();
  // await getZydData();
  // await getShwzData();
  // await getScgyData();
  // await getJzwzData();
  // await getHhData();
});
onBeforeUnmount(() => {
  if (editorRef10.value) editorRef10.value.destroy();
  if (editorRef11.value) editorRef11.value.destroy();
  if (editorRef12.value) editorRef12.value.destroy();
  if (editorRef13.value) editorRef13.value.destroy();
  if (editorRef14.value) editorRef14.value.destroy();
  if (editorRef15.value) editorRef15.value.destroy();
});
</script>
<template>
  <div class="">
    <FirstTitle name="交通运力现状" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>
    <div class="text-center top-15">
      {{ city }}交通运力情况统计表（单位:台次）
    </div>
    <el-table
      id="table"
      :data="jtydList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
      max-height="500"
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="行政区划" />
      <el-table-column prop="k_count" label="营运客车" />
      <el-table-column prop="h_count" label="营运货车" />
    </el-table>

    <FirstTitle name="医疗救护现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef11"
        :defaultConfig="toolbarConfig11"
        :mode="mode11"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml11"
        :defaultConfig="editorConfig11"
        :mode="mode11"
        @onCreated="handleCreated11"
      />
    </div>

    <div class="text-center top-15">{{ city }}医护人员情况统计表</div>
    <el-table
      id="table"
      :data="yhryList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
      max-height="500"
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="行政区划" />
      <el-table-column prop="c3" label="卫生机构数量">
        <el-table-column prop="sum" label="总数" />
        <el-table-column prop="hospital_sum" label="医院" />
        <el-table-column prop="jc_hospiatl" label="基层医疗卫生机构" />
        <el-table-column prop="zy_sanitation" label="专业公共卫生机构" />
        <el-table-column prop="other_sanitation" label="其他卫生机构" />c
      </el-table-column>
      <el-table-column prop="c3" label="其他卫生机构">
        <el-table-column prop="wsjsrssl" label="卫生技术人员" />
        <el-table-column prop="physician" label="执业（助理）医师" />
        <el-table-column prop="nurse" label="注册护士" />
      </el-table-column>
      <el-table-column prop="c3" label="床位数">
        <el-table-column prop="bedroom" label="床位数" />
        <el-table-column prop="yscwsl" label="医院床数" />
        <el-table-column prop="jcwsjgcwsl" label="基层卫生机构" />
        <el-table-column prop="zywsjgcwsl" label="专业卫生机构" />
      </el-table-column>
    </el-table>

    <FirstTitle name="装备器材保障现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef12"
        :defaultConfig="toolbarConfig12"
        :mode="mode12"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml12"
        :defaultConfig="editorConfig12"
        :mode="mode12"
        @onCreated="handleCreated12"
      />
    </div>

    <FirstTitle name="物资保障现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef13"
        :defaultConfig="toolbarConfig13"
        :mode="mode13"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml13"
        :defaultConfig="editorConfig13"
        :mode="mode13"
        @onCreated="handleCreated13"
      />
    </div>

    <FirstTitle name="经费保障现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef14"
        :defaultConfig="toolbarConfig14"
        :mode="mode14"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml14"
        :defaultConfig="editorConfig14"
        :mode="mode14"
        @onCreated="handleCreated14"
      />
    </div>

    <FirstTitle name="核生化保障现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef15"
        :defaultConfig="toolbarConfig15"
        :mode="mode15"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml15"
        :defaultConfig="editorConfig15"
        :mode="mode15"
        @onCreated="handleCreated15"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>